<template>
  <a-modal
    centered
    title="拨打电话"
    width="1600px"
    v-model="visible"
    :mask-closable="false"
    :closable="false"
    :footer="null"
    :keyboard="false"
    :z-index="1001"
    @cancel="onCallCancel"
  >
    <div class="l-call-phone">
      <a-row :gutter="60">
        <a-col :span="9" :style="{ overflow: 'hidden' }">
          <a-spin :spinning="leftLoading">
            <a-form-model
              ref="customerForm"
              :rules="rules"
              :model="customerForm"
            >
              <a-form-model-item label="基本状态">
                <a-input
                  v-if="customerForm.register_address == '' || customerForm.registered_capital == ''"
                  disabled
                  :style="{ color: '#333' }"
                  :value="
                    `${customerForm.source_format} > ${customerForm.first_type_format} > ${customerForm.created_at_format}入库 > ${customerForm.phone_province}${customerForm.phone_city} > ${customerForm.tm_name}${customerForm.pt_name}`
                  " />
                <a-input
                  v-else
                  disabled
                  :style="{ color: '#333' }"
                  :value="
                    `${customerForm.legal_person} > ${customerForm.register_address} > ${customerForm.registered_capital} > ${customerForm.business_status}`
                  " />
              </a-form-model-item>
              <a-form-model-item v-if="type == 'pt'" label="专利名称">
                <a-input disabled placeholder="专利名称" v-model="customerForm.pt_name" />
              </a-form-model-item>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="客户名称">
                    <a-input placeholder="客户名称" v-model="customerForm.customer_name" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="所属行业">
                    <a-input placeholder="请输入所属行业" v-model="customerForm.industry" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="下次预约时间" prop="yy_time">
                    <a-date-picker
                      :default-value="customerForm.yy_time ? moment(customerForm.yy_time, 'YYYY-MM-DD') : null"
                      format="YYYY-MM-DD"
                      :disabled-date="disabledDate"
                      placeholder="请预约下次联系时间"
                      style="width: 100%;"
                      @change="onChangeTime"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="联系电话1">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input disabled :style="{ color: '#333' }" type="text" v-model="customerForm.phone" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" @click="phoneModal(customerForm.phone)"> 开始通话 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话2">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input type="text" v-model="customerForm.phone2" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" :disabled="customerForm.phone2 === ''" @click="phoneModal(customerForm.phone2)"> 开始通话 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <!--              <a-form-model-item>-->
              <!--              </a-form-model-item>-->
              <a-form-model-item label="微信同号">
                <a-row :gutter="20">
                  <a-col :span="12">
                    <a-input placeholder="请选择联系电话" v-model="customerForm.wechat"></a-input>
                  </a-col>
                  <a-col :span="12">
                    <a-row :gutter="10">
                      <a-col :span="12">
                        <a-button type="danger" block ghost @click="copy(customerForm.phone)">联系电话1</a-button>
                      </a-col>
                      <a-col :span="12">
                        <a-button :disabled="customerForm.phone2 === ''" type="danger" block ghost @click="copy(customerForm.phone2)">联系电话2</a-button>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="进展" prop="customer_status">
                      <a-select
                        show-search
                        style="width: 100%"
                        placeholder="选择客户状态（多选）"
                        v-model="customerForm.customer_status"
                        :filter-option="filterOption"
                      >
                        <a-select-option v-for="item in statusOptions" :key="item.id" :value="item.id">
                          {{ item.title }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item label="资源备注" prop="notes">
                <a-textarea :rows="5" v-model="customerForm.notes" placeholder="请输入进展备注"></a-textarea>
              </a-form-model-item>
              <a-form-model-item>
                <div style="color: #ff0000;font-size: 15px;line-height: 24px;margin-top: 10px;">请顾问如实填写信息质量，推广部需要你们的真实反馈，让我们的数据变得更加优质，谢谢！</div>
              </a-form-model-item>
              <a-form-model-item>
                <a-row :style="{ marginTop: '30px' }">
                  <a-col :span="12" :style="{ textAlign: 'left' }">
                    <a-button type="default" @click="onSubmit(1)">
                      问题资源
                    </a-button>
                  </a-col>
                  <a-col :span="12" :style="{ textAlign: 'right' }">
                    <a-button type="default" @click="onSubmit(2)">
                      休了
                    </a-button>
                    <a-button type="primary" :style="{ marginLeft: '8px' }" @click="onSubmit(3)">
                      保存
                    </a-button>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-form-model>
          </a-spin>
        </a-col>
        <a-col :span="15">
          <a-card :title="false" style="min-height: 620px">
            <a-tabs type="card" @change="onRightTabs">
              <a-tab-pane key="1" tab="报价"></a-tab-pane>
              <a-tab-pane key="2" tab="常见问题"></a-tab-pane>
            </a-tabs>
            <question v-if="rightTab == 1"></question>
            <my-article v-if="rightTab == 2"></my-article>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <telephone v-if="telVisible" :telephone="telephone" @cancel="closePhoneList"></telephone>
  </a-modal>
</template>

<script>
import storage from 'store'
import Telephone from '@/components/CallPhone/Telephone'
import Question from '@/components/CallPhone/Question'
import MyArticle from '@/components/CallPhone/Article'
import { takeAbandon } from '@/api/customer'
import { getCall, saveCall, signQuestionCustomer } from '@/api/adviser'
import moment from 'moment'

export default {
  name: 'PhoneModal',
  props: {
    customerId: {
      type: String,
      default: ''
    }
  },
  components: {
    Telephone,
    Question,
    MyArticle
  },
  data () {
    return {
      businessData: [],
      articlePanel: true, // 列表true 内容false
      visible: false,
      telVisible: false,
      articleLoading: false,
      leftLoading: true,
      customerForm: {},
      statusOptions: {},
      rules: {
        customer_status: [
          { required: true, message: '必须选择进展状态', trigger: 'change' }
        ]
      },
      phone1Visible: false,
      phone2Visible: false,
      buttonDisabled: true,
      telephone: '',
      rightTab: '1',
      type: storage.get('Group_Type')
    }
  },
  created () {
    this.getCallInfo(this.customerId)
  },
  methods: {
    moment,
    getCallInfo (id) {
      const app = this
      const arr = []
      app.leftLoading = true
      getCall(id).then(res => {
        if (res.status === 0) {
          app.customerForm = res.result.customer
          // app.statusOptions = res.result.customer_status_opts
          for (const k in res.result.customer_status_opts) {
            const data = {}
            data['id'] = (res.result.customer_status_opts[k].id).toString()
            data['title'] = res.result.customer_status_opts[k].title
            arr.push(data)
          }
          app.statusOptions = arr
          app.leftLoading = false
          app.visible = true
        } else {
          app.$warning({
            title: res.msg
          })
          app.onCallCancel()
        }
      })
    },
    phoneModal (tel) {
      this.telephone = tel
      this.telVisible = true
    },
    onCallCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    onChangeTime (date, dateString) {
      this.customerForm['yy_time'] = dateString
    },
    disabledDate (current) {
      return current && current < moment().endOf('d')
    },
    copy (e) {
      this.customerForm.wechat = e
    },
    onRightTabs (key) {
      this.rightTab = key
    },
    onSubmit (type) {
      const app = this
      const data = {}
      app.$refs.customerForm.validate(valid => {
        if (valid) {
          for (const k in app.customerForm) {
            data['customer[' + k + ']'] = app.customerForm[k]
          }
          saveCall(app.customerId, data).then(res => {
            if (res.status === 0) {
              if (type === 1) {
                app.$confirm({
                  centered: true,
                  content: '是否标记此用户为问题客户',
                  zIndex: 1005,
                  onOk: () => {
                    signQuestionCustomer(app.customerForm.customer_id).then(b => {
                      if (b.status === 0) {
                        app.onCallCancel()
                      } else {
                        app.$warning({
                          title: b.msg
                        })
                      }
                    })
                  }
                })
              }
              if (type === 2) {
                app.$confirm({
                  title: '是否放弃本条资源',
                  zIndex: 119999,
                  onOk: () => {
                    takeAbandon(app.customerForm.customer_id).then(a => {
                      if (a.status === 0) {
                        app.onCallCancel()
                      } else {
                        app.$warning({
                          title: a.msg
                        })
                      }
                    })
                  }
                })
              }
              if (type === 3) {
                app.onCallCancel()
              }
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    closePhoneList (visible) {
      this.telVisible = visible
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style>
.l-call-phone .ant-form-item {
  margin-bottom: 0 !important;
}
</style>
